<template>
  <div style="border: 1px solid red; height: 800px; width: 100%">123</div>
  <div>
    <button @click="toTest">去测试页面</button>
  </div>
  <div>
    <button @click="hasParamsToTest">query带参数去测试页面</button>
    <button @click="hasParamsToTest2">params带参数去测试页面</button>
  </div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const toTest = () => {
  router.push("/testRouter");
};
const hasParamsToTest = () => {
  router.push({
    path: "./testRouter",
    query: {
      title: "带参数的页面标题",
    },
  });
};
const hasParamsToTest2 = () => {
  router.push({
    name: "TestRouter",
    params: {
      content: "带参数的页面内容",
    },
  });
};


//  添加路由
// router.addRoute({ path: '/about', component: About })
// 删除路由
// router.removeRoute('about')
// router.hasRoute()：检查路由是否存在。
// router.getRoutes()：获取一个包含所有路由记录的数组。
</script>